import React from 'react'

/**
 * 受控组件, 就是将 HTML 中的 value 值统一交给 React 的 state 处理
 */
class Handler extends React.Component {
  // 1. 先声明state的状态
  state = {
    val: ''
  }
  handleChange = (e) => {
    // 4. 在事件处理程序中将最新的值赋值给state中的状态
    this.setState({
      val: e.target.val
    })
  }
  render() {
    return (
      // 2. 将state中的状态和value进行绑定
      // 3. 通过绑定onChange事件监听输入框值的改变
      <input type="text" value={this.state.val} onChange={ this.handleChange }/>
    )
  }
}

export default Handler